<template>
  <div class="layout">
    <Layout>
      <Header class="header">
        <div class="header-content">
          <div class="layout-logo">
            <img src="../assets/login_title.png" alt="Logo" />
          </div>
          <div class="layout-user">
            <Poptip trigger="click" placement="bottom-end">
              <Avatar class="user-avatar" @click="handleMenuClick">{{ user.userName.slice(0, 1) }}</Avatar>
              <template #content>
                <div class="user-menu">
                  <div class="user-info">
                    <p>{{ user.userName }}</p>
                    <p class="user-role">{{ user.userRole === 'admin' ? '管理员' : '普通用户' }}</p>
                  </div>
                  <Divider />
                  <Button type="text" @click="logoutMethod" long>注销</Button>
                </div>
              </template>
            </Poptip>
          </div>
        </div>
      </Header>
      <Layout>
        <Sider hide-trigger class="sider">
          <Menu
            @on-select="handleSelect"
            active-name="1"
            theme="dark"
            width="auto"
            :open-names="['1']"
            class="side-menu"
          >
            
            <MenuItem name="1"><Icon type="ios-book" />图书列表</MenuItem>

            <!-- 根据 userRole 显示不同的菜单项 -->
            <MenuItem v-if="user.userRole === 'admin'" name="2"> <Icon type="ios-people" />用户管理 </MenuItem>
            <MenuItem v-else name="3"> <Icon type="ios-list-box" />借阅记录 </MenuItem>

            <!-- 个人用户菜单 -->
            <Submenu name="4" :style="{ background: '#2f4050', color: '#a7b1c2', fontweight: 'bold' }">
              <template #title>
                <Icon type="ios-person" />
                个人用户
              </template>
              <MenuItem name="4-1">个人信息</MenuItem>
              <MenuItem name="4-2">修改密码</MenuItem>
            </Submenu>
          </Menu>
        </Sider>
        <Layout class="content-layout">
          <Breadcrumb class="breadcrumb">
            <BreadcrumbItem v-for="(item, index) in breadcrumbItems" :key="index">
              {{ item }}
            </BreadcrumbItem>
          </Breadcrumb>
          <Content class="content">
            <RouterView></RouterView>
          </Content>
        </Layout>
      </Layout>
    </Layout>
  </div>
</template>

<script>
import { ref, watch, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { logout, userInfo } from '@/api/user';

export default {
  setup() {
    const router = useRouter();
    const user = ref({ userName: '', userRole: '' });
    const breadcrumbItems = ref(['首页', '图书列表']);

    const handleSelect = (name) => {
      let routeName = "Home";
      if (name === "1") {
        routeName = "图书列表";
        router.push("/library");
      } else if (name === "2") {
        routeName = "用户管理";
        router.push("/manager");
      } else if (name === "3") {
        routeName = "借阅记录";
        router.push("/record");
      } else if (name === "4-1") {
        routeName = "个人信息";
        router.push("/information");
      } else if (name === "4-2") {
        routeName = "修改密码";
        router.push("/passwd");
      } 

      breadcrumbName.value = routeName; // 更新面包屑名称
    };

    const logoutMethod = () => {
      const token = document.cookie
        .split('; ')
        .find((row) => row.startsWith('token='))
        ?.split('=')[1];
      document.cookie = 'token=; expires=Thu, 01 Jan 1970 00:00:00 GMT';
      logout(token);
      router.push('/login');
      setTimeout(() => {
        // Assuming you're using iView's Message component
        this.$Message.success('您已成功登出');
      }, 300);
    };

    const getInfo = () => {
      const token = document.cookie
        .split('; ')
        .find((row) => row.startsWith('token='))
        ?.split('=')[1];

      userInfo(token).then((res) => {
        user.value.userName = res.data.userName;
        user.value.userRole = res.data.userRole;
      });
    };

    onMounted(() => {
      getInfo();
    });

    watch(
      () => router.currentRoute.value.path,
      (newPath) => {
        const routeMap = {
          '/library': '图书列表',
          '/manager': '用户管理',
          '/record': '借阅记录',
          '/information': '个人信息',
          '/passwd': '修改密码',
        };
        breadcrumbItems.value = ['首页', routeMap[newPath] || 'Home'];
      }
    );

    return {
      user,
      handleSelect,
      logoutMethod,
      breadcrumbItems,
    };
  },
};
</script>

<style scoped>
.layout {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.header {
  background: #515a6e;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 1;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  padding: 0 20px;
}

.layout-logo {
  height: 30px;
}

.layout-logo img {
  height: 100%;
}

.layout-user {
  display: flex;
  align-items: center;
}

.user-avatar {
  cursor: pointer;
  background-color: #1890ff;
  color: #fff;
}

.user-menu {
  min-width: 150px;
  padding: 10px;
}

.user-info {
  text-align: center;
  margin-bottom: 10px;
}

.user-role {
  font-size: 12px;
  color: #999;
}

.sider {
  background: #001529;
}

.side-menu {
  height: 100%;
}

.content-layout {
  padding: 0 24px 24px;
}

.breadcrumb {
  margin: 16px 0;
}

.content {
  background: #fff;
  padding: 24px;
  min-height: 280px;
  border-radius: 4px;
}

/* 优化菜单项样式 */
.ivu-menu-dark.ivu-menu-vertical .ivu-menu-item, 
.ivu-menu-dark.ivu-menu-vertical .ivu-menu-submenu-title {
  color: rgba(255, 255, 255, 0.65);
}

.ivu-menu-dark.ivu-menu-vertical .ivu-menu-item:hover, 
.ivu-menu-dark.ivu-menu-vertical .ivu-menu-submenu-title:hover {
  color: #fff;
  background-color: #1890ff;
}

.ivu-menu-dark.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu), 
.ivu-menu-dark.ivu-menu-vertical .ivu-menu-submenu-title-active:not(.ivu-menu-submenu) {
  color: #fff;
  background-color: #1890ff;
}
</style>
